<script lang="ts" setup>
  import tokenUtil from '@/utils/tokenUtil';
  import useVideoStore from '@/store/modules/video';
  import { videoCategory } from '@/services/api/video';

  const videoStore = useVideoStore();

  if (tokenUtil.getToken() && videoStore.videoCategory.length == 0) {
    videoCategory().then(({ data }) => {
      if (data) {
        videoStore.updateVideoCategory(data.categorys);
      }
    });
  }

  const videos = ref<any[]>([]);

  for (let i = 0; i < 100; i++) {
    videos.value.push({
      videoId: i,
      title: 'Video' + i,
      thumbnail: 'http://csmcool.top/upload/1732452379183--1225662396-test.jpeg',
      author: 'Author' + i,
      date: '2024-12-02',
    });
  }
</script>

<template>
  <div class="container">
    <div class="container-nav">
      <div
        class="container-nav-item"
        v-for="item in videoStore.videoCategory"
        :key="item.categoryId"
      >
        {{ item.categoryName }}
      </div>
    </div>
    <div class="container-videos">
      <div class="video-card" v-for="video in videos" :key="video.videoId">
        <div class="video-thumbnail">
          <img :src="video.thumbnail" alt="Video Thumbnail" />
        </div>
        <div class="video-details">
          <h3 class="video-title">{{ video.title }}</h3>
          <p class="video-author">By: {{ video.author }}</p>
          <p class="video-date">{{ video.date }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  /* 容器样式 */
  .container {
    display: flex;
    height: 100vh;
    width: 100%;
    flex-direction: column;
  }

  /* 导航栏样式，使用 Grid 布局 */
  .container-nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(
      auto-fit,
      minmax(100px, 1fr)
    ); /* 自动适应列数，最小120px，最大1fr */
    gap: 16px; /* 列间距 */
    row-gap: 10px; /* 行间距（两排之间的间距） */
    padding: 10px;
    background-color: #f4f4f4; /* 背景颜色 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  }

  /* 单个导航项 */
  .container-nav-item {
    display: flex; /* 使用flex布局确保文字居中 */
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: #333; /* 字体颜色 */
    font-weight: bold;
    height: 24px; /* 固定高度 */
    padding: 0 16px; /* 水平内边距 */
    border-radius: 4px;
    transition: all 0.3s ease; /* 过渡效果 */
    cursor: pointer;
    text-align: center; /* 文字居中 */
    background-color: #fff; /* 背景颜色 */
    border: 1px solid #ddd; /* 边框 */
  }

  /* 鼠标悬停效果 */
  .container-nav-item:hover {
    background-color: #007bff; /* 悬停时的背景颜色 */
    color: #fff; /* 悬停时的字体颜色 */
    transform: scale(1.05); /* 鼠标悬停时轻微放大 */
  }

  /* 激活状态的导航项 */
  .container-nav-item.active {
    background-color: #28a745;
    color: #fff;
  }

  /* 视频展示区域 */
  .container-videos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px 0;
  }

  /* 视频卡片样式 */
  .video-card {
    min-width: 300px;
    height: 280px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease;
    cursor: pointer;
  }

  .video-card:hover {
    transform: scale(1.05);
  }

  /* 视频封面 */
  .video-thumbnail {
    width: 100%;
    height: 180px;
    overflow: hidden;
  }

  .video-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 视频详情 */
  .video-details {
    padding: 10px;
  }

  /* 视频标题 */
  .video-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0;
    white-space: nowrap; /* 防止标题换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
  }

  /* 视频作者和日期 */
  .video-meta {
    display: flex;
    justify-content: space-between; /* 让作者和日期在同一行 */
    font-size: 14px;
    color: #777;
    margin-top: 10px;
  }

  .video-author {
    flex: 1; /* 占据剩余空间 */
  }

  .video-date {
    text-align: right; /* 使日期右对齐 */
  }
</style>
